import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MateDataService } from 'src/app/services/mate_data.service';
import { SessionService } from 'src/app/services/session.service';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

    userInfo: any = {};
    verificationCode: any = '';
    show_num: any = [];

    msgs: Array<Object> = [];
    constructor(
        private metaDataService: MateDataService,
        private sessionService: SessionService,
        private router: Router
    ) { }

    ngOnInit(): void {
        this.draw(this.show_num);
    }

    canvasClick() {
        this.draw(this.show_num);
    }

    draw(show_num) {

        const canvas: any = document.getElementById("canvas");//获取到canvas的对象，演员
        const context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台

        const canvas_width = canvas.clientWidth;;
        const canvas_height = canvas.clientHeight;;
        canvas.width = canvas_width
        canvas.height = canvas_height;

        const sCode = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        const aCode = sCode.split(",");
        const aLength = aCode.length;//获取到数组的长度

        for (let i = 0; i <= 3; i++) {
            const j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            const deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            const txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();

            const x = 10 + i * 20;//文字在canvas上的x坐标
            const y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = this.randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (let i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = this.randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (let i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = this.randomColor();
            context.beginPath();

            const x = Math.random() * canvas_width;
            const y = Math.random() * canvas_height;

            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    randomColor() {//得到随机的颜色值
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }


    loginVerification() {
        const value = this.verificationCode.toLowerCase();
        const num = this.show_num.join("");
        if (value == '') {
            this.msgs = [
                { severity: 'warn', summary: '警告', content: "请输入验证码！" },
            ];
            this.verificationCode = '';
            this.draw(this.show_num);
        } else if (value === num) {
            this.verificationCode = '';
            // this.draw(this.show_num);
            this.metaDataService.loginVerification(this.userInfo).subscribe((res: any) => {
                console.log("login-res", res);
                const { status, result } = res;
                if (status.toUpperCase() === "SUCCESS") {

                    this.sessionService.putSessionValue('user', result);

                    this.router.navigate(['mainpage/excelTable'])
                } else {
                    this.msgs = [
                        { severity: 'error', summary: '失败', content: "用户名或密码错误！" },
                    ];
                    this.verificationCode = '';
                    this.draw(this.show_num);
                }
            });
        } else {
            this.msgs = [
                { severity: 'error', summary: '失败', content: '验证码错误！请重新输入！' },
            ];
            this.verificationCode = '';
            this.draw(this.show_num);
        }
    }
}
